jQuery那些容易被忽略的问题

#jQuery那些容易被忽略的问题| 来源: 网络整理| 查看: 265

伴随Vue、Angular、React等编译式前端框架的崛起，前端开发人员逐渐从繁琐的DOM操作当中解脱出来。但是在项目实践过程当中，依然存有诸多问题需要通过直接操作DOM来解决，虽然现代化浏览器已经支持等HTML5新特性，不过为了屏蔽各种浏览器原生API接口的差异化，最终依然需要借助jQuery来实现DOM操作。所以，jQuery这款诞生于2006年的库，依然在现代化前端开发当中扮演着重要角色，本文结合笔者近几年的实践经验，总结了使用jQuery过程当中容易被忽略的一些问题。

本篇文章已经同步发布在笔者的 Github Pages，有需要的同学可以结合原文书签进行阅读。

欢迎大家关注公众号【IT圈】：Electronics, Embedded & Web

获取更多电子技术、嵌入式系统、Web开发相关的原创性文章：

jQuery对象和DOM对象DOM对象：通过原生javascript（如getElementsByTagName或getElementId）获取的html节点。var dom = document.getElementById("app") // 获取DOM对象 var html = dom.innerHTML; // 获取DOM元素内的HTML代码

jQuery对象：被jQuery包装过的DOM对象。var jq = $("#app"); // 获取jQuery对象 var html = jq.html(); // 获取jQuery对象内的HTML代码

不能交换使用jQuery对象、DOM对象上的属性，如上面代码中的innerHTML与html()。jQuery对象->DOM对象

jQuery提供了2种转换DOM对象的方法：

（1）jQuery对象是一个类似于数组的对象，因此可以通过数组运算符[]获取指定索引的DOM对象。

var jq = $(".test"); // jQuery对象 var dom = jq[0]; // DOM对象

（2）通过jQuery本身提供的get(index)方法来获取指定index的对象。

var jq = $(".test"); // jQuery对象 var dom = jq.get(0); // DOM对象 DOM对象->jQuery对象

将DOM对象通过$()函数包装起来，就可以获得jQuery对象。

var dom = document.getElementById("test"); var jq = $(dom); 可以考虑使用$作为前缀为jQuery对象进行命名，例如上面代码中的变量jq可以命名为$jq。jQuery选择器性能

提升选择器性能的有效途径是为选择器指定上下文，并以上下文为基础使用first()、last()、find()、filter()、hasClass()等jQuery筛选API。

下面对jQuery选择器的性能由高向低进行排序：

1、ID选择器

底层通过调用document.getElementById()实现。

$("#id")

2、标签选择器

底层通过调用document.getElementsByTagName()实现。

$("input")

3、类选择器

底层通过调用document.getElementsByClassName()实现。

$(".class")

4、属性及其它选择器

底层通过对HTML字符串进行正则表达式匹配来实现。

$("[contenteditable]") jQuery底层有使用原生document.querySelectorAll()，可以有效提升IE8及以上浏览器当中选择器的性能。jQuery作者已经将选择器引擎独立为Sizzle库，而Sizzle会按照从右到左的顺序来解析选择器字符串，从而提高查询效率，缩小查找范围和遍历次数。缓存常用的jQuery选择器对象

将需要常用的jQuery选择器对象赋值给一个局部或全局变量，是有效提升jQuery运行性能的良好开端。

var $jq = $("#app"); $jq.find("div.tree").append("string"); $jq.find("[contenteditable].test").html(); $jq.find(".demo.test").html(); 减少循环时的DOM操作

在for、while、$.each()等循环语句中，尽量减少DOM操作的次数，最好先将模板在循环中组装完成之后再一次性插入DOM。

var $app = $("#app"); var template = ""; for (var i = 0; i

【本文地址】

公司简介

联系我们